<template>
  <div>
    <SearchTable
      v-bind="$attrs"
      :searchSchame="searchSchame"
      :tableColumns="tableColumns"
      :api="getCoordinationApplicationList"
      :listPermission="CoordinationApplicationPermission.LIST"
      :dealSearchParams="dealSearchParams"
      sortField="apply_time"
      ref="tableRef"
    >
      <template #actions>
        <TableColumn label="操作" fixed="right" align="left" :width="204">
          <template #default="{ row }">
            <el-button
              v-if="
                [EApproveStatus['通过'], EApproveStatus['待审批']].includes(
                  row.applyStatus,
                )
              "
              size="small"
              @click="coordinationDetail.show(row.id)"
            >
              详情
            </el-button>

            <el-button
              v-if="
                [EApproveStatus['待提交'], EApproveStatus['不通过']].includes(
                  row.applyStatus,
                )
              "
              :loading="submitLoading"
              type="success"
              size="small"
              @click="handleSubmit(row.id)"
            >
              提交
            </el-button>

            <el-button
              v-if="
                [EApproveStatus['不通过'], EApproveStatus['待提交']].includes(
                  row.applyStatus,
                )
              "
              type="primary"
              size="small"
              @click="coordinationAdd.show(undefined, row.id)"
            >
              编辑
            </el-button>
            <el-button
              v-if="
                [EApproveStatus['不通过'], EApproveStatus['待提交']].includes(
                  row.applyStatus,
                )
              "
              type="danger"
              size="small"
              :loading="loading"
              @click="handleDelete(row.id)"
            >
              删除
            </el-button>
          </template>
        </TableColumn>
      </template>
    </SearchTable>
    <CoordinationAdd ref="coordinationAdd" @update="updateList" />
    <CoordinationDetail ref="coordinationDetail" />
    <SelectApprovePerson
      ref="selectApprovePerson"
      @submit="handleSelectPersonSuccess"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, useTemplateRef } from 'vue'
import SearchTable from '@/components/table/SearchTable.vue'
import { CoordinationApplicationPermission } from '@/type/permission'
import {
  deleteCoordinationApplication,
  getCoordinationApplicationList,
  submitCoordinationApplicationById,
} from '@/api/application/coordination'
import TableColumn from '@/components/table/TableColumn.vue'
import CoordinationAdd from './CoordinationAdd.vue'
import CoordinationDetail from './CoordinationDetail.vue'
import { dealSearchParams, generateTableColumn, searchSchame } from './util'
import { ElMessageBox } from 'element-plus'
import useFetch from '@/hooks/useFetch'
import SelectApprovePerson from '@/components/approve/SelectApprovePerson.vue'
import { EApproveStatus } from '@/components/statusShow/util'
import { Message } from '@/hooks/message'
import { ESelectApproveUserType } from '@/api/sys/userManage'

const selectApprovePerson = useTemplateRef<typeof SelectApprovePerson>(
  'selectApprovePerson',
)

// 记录当前选择提交的id
const coordinationId = ref(0)

const { loading, execute, onFetchSuccess } = useFetch(
  deleteCoordinationApplication,
)

onFetchSuccess(() => {
  Message({
    message: '删除成功',
    type: 'success',
  })
  updateList()
})

const coordinationAdd =
  useTemplateRef<InstanceType<typeof CoordinationAdd>>('coordinationAdd')
const coordinationDetail =
  useTemplateRef<InstanceType<typeof CoordinationDetail>>('coordinationDetail')

const tableRef = useTemplateRef<InstanceType<typeof SearchTable>>('tableRef')

const tableColumns = generateTableColumn(tableColumnClick)

const {
  loading: submitLoading,
  execute: submitExecute,
  onFetchSuccess: submitOnFetchSuccess,
} = useFetch(submitCoordinationApplicationById)

submitOnFetchSuccess(() => {
  Message({
    message: '提交成功',
    type: 'success',
  })
  updateList()
})

// 列表项点击
function tableColumnClick(columnType: string, row: Record<string, any>) {
  if (columnType === 'applyTopic') {
    coordinationDetail?.value.show(row.id)
  }
}

// 更新列表
function updateList() {
  tableRef.value?.getInfo()
}

// 删除
function handleDelete(id: number) {
  ElMessageBox.confirm('确定删除吗？', '删除提示', {
    type: 'warning',
  }).then(async () => {
    await execute(id)
  })
}

// 提交
function handleSubmit(id: number) {
  coordinationId.value = id
  selectApprovePerson?.value.show({
    type: ESelectApproveUserType.COORDINATION,
    applyId: id,
  })
}

// 选择审批人后
function handleSelectPersonSuccess(approveUserId: number) {
  submitExecute({
    approveUserId,
    id: coordinationId.value,
  })
}
</script>
